<template>
  <div class="m-inputBox flex-item flex-column">
    <div class="chat-tools clearfix" v-if="isVisitor">
        <div class="pre" v-show="isWatching">
            <p class="preMsg">我是同步消息</p>
        </div>
        <a href="javascript:;" class="tools-btn" title="字体">
            <Icon type="social-angular-outline" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="传送文件">
            <Upload
                :before-upload="handleUpload"
                action="//jsonplaceholder.typicode.com/posts/">
                <Icon class="tool-icon" type="ios-folder-outline" size='18'></Icon>
            </Upload>
        </a>
        <a href="javascript:;" class="tools-btn" title="实时查看" @click="isWatching = !isWatching">
            <Icon class="tool-icon" type="ios-search" size='18'></Icon>
        </a>    
        <a href="javascript:;" class="tools-btn" title="表情">
            <Icon class="tool-icon" type="android-happy" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="推送信息收集表" @click="pushActions('infoForm', $event)">
            <Icon class="tool-icon" type="android-document" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="推送满意度调查" @click="pushActions('rangeForm', $event)">
            <Icon class="tool-icon" type="android-list" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="立即评估" @click="saveVisitorInfo">
            <Icon class="tool-icon" type="android-contact" size='18'></Icon>
        </a>
    </div>
    <div class="chat-tools clearfix" v-else>
        <a href="javascript:;" class="tools-btn" title="字体">
            <Icon type="social-angular-outline" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="表情">
            <Icon class="tool-icon" type="android-happy" size='18'></Icon>
        </a>
        <a href="javascript:;" class="tools-btn" title="传送文件">
            <Upload
                :before-upload="handleUpload"
                action="//jsonplaceholder.typicode.com/posts/">
                <Icon class="tool-icon" type="ios-folder-outline" size='18'></Icon>
            </Upload>
        </a>
        <div class="receiver fl flex-row">
            <span class="to">您对：</span>
            <Select v-model="model1" size="small">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span class="say">说</span>
        </div>
    </div>
    <div class="layout-2 flex-item flex-row">
        <pre class="flex-item"
            placeholder="请输入你想要说的话"
            contentEditable="true" spellcheck="false" ref="inputbox" @paste="clipboardData" @keydown="editAreaKeydown"
            @keyup="editAreaKeyUp" @click.stop.prevent="editAreaKeyUp('click',$event)" v-html="inputBoxInnerHTML"></pre>
        <div class="send flex-row flex-row-center align-items">
            <Button class="send-btn" @click="sendMsg">发送</Button>
            <Dropdown trigger="click" class="list-box" @on-click="selectItem">
                <Button class="send-setting"><Icon type="arrow-down-b"></Icon></Button>
                <DropdownMenu slot="list" class="list" v-if="isVisitor">
                    <DropdownItem class="item" name="s1">
                        <div class="left-point">
                            <a href="javascript:;" class="point" v-show="this.sendModel == '131'"></a>
                        </div>
                        <div class="right">Ctrl+Enter发送(C)</div>
                    </DropdownItem>
                    <DropdownItem class="item" name="s2">
                        <div class="left-point">
                            <a href="javascript:;" class="point" v-show="this.sendModel == '13'"></a>
                        </div>
                        <div class="right">Enter发送(E)</div>
                    </DropdownItem>
                    <DropdownItem class="item" name="s3">
                        <div class="left-point">
                            <a href="javascript:;" class="select"><Icon type="checkmark" v-if="isAutoNextDialog"></Icon></a>
                        </div>
                        <div class="right">发送后切换到下一对话(Y)</div>
                    </DropdownItem>
                    <DropdownItem class="item" name="s4">
                        <div class="left-point"></div>
                        <div class="right">其他快捷键设置(Z)</div>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
  </div>
</template>

<script>
  import ImageCompressor from "@/utils/image-compressor.esm";
  import eventBUS from '@/utils/eventBUS'
  import {mapGetters} from 'vuex'
  import * as xss from '@/utils/index'
  export default {
    name: 'InputBox',
    props:{
        isVisitor: {
            type:Boolean,
            default: true
        },
        chatType: {
            type: String,
            default: 'visitor'
        }
    },
    data () {
      return {
        rangeInfo: {
          range: null,//光标对象
          self: null,
        },
        inputBoxInnerHTML:'',
        isAutoNextDialog:false,
        isWatching: false,
        sendModel:'131',
        expressionList: {
            baseUrl: 'http://192.168.35.91:8090/face/',
            list: [...Array(75).keys()]
        },
        props: {
          expressionPopOpen: false,
          inputingPopOpen: false,
          menuPopOpen: false,
        },
        inputMsgList: {},//输入记录
        loadingStatus: false,
        file: null,
        cityList: [
            {
                value: 'New York',
                label: '所有人'
            },
            {
                value: 'London',
                label: 'London'
            },
            {
                value: 'Sydney',
                label: 'Sydney'
            },
            {
                value: 'Ottawa',
                label: 'Ottawa'
            },
            {
                value: 'Paris',
                label: 'Paris'
            },
            {
                value: 'Canberra',
                label: 'Canberra'
            }
        ],
        model1: ''

      }
    },
    methods: {
        clipboardData (e) {
            let cbd = e.clipboardData;
            let ua = window.navigator.userAgent;
            // 如果是 Safari 直接 return
            if (!(e.clipboardData && e.clipboardData.items)) {
            return;
            }
            // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
            if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
            cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
                return;
            }
            let copyContent = cbd.items[0];
            if (copyContent.kind == 'file') {
            let blob = copyContent.getAsFile();
            if (blob.size === 0) {
                return;
            }
            if (blob.type == 'image/png' || blob.type == 'image/jpeg' || blob.type == 'image/gif') {
                new ImageCompressor(blob, {
                success: (res) => {
                    this.getObjectURL(res);  //从Blob获取图片的地址
                    this.pasteHtmlAtCaret('<img src="' + this.getObjectURL(blob) + '"/>')
                },
                error(e) {
                    console.log(e);
                },
                });
            }
            }

        },
        editAreaKeydown () {

        },
        editAreaKeyUp (event) {
            //发送消息
            var e = event || window.event || arguments.callee.caller.arguments[0]; 
            if(this.sendModel == '13' && e.keyCode == '13'){
                this.sendMsg();
            }else if(e.ctrlKey && e.keyCode  == '13'){
                this.sendMsg();
            }
            if (window.getSelection) {
                let selection = window.getSelection(), range;
                if (selection.getRangeAt && selection.rangeCount) {
                    range = selection.getRangeAt(0);
                    //range.deleteContents();   //删除选中内容
                }
                this.rangeInfo = {
                    selection,
                    range,
                }
            }
        },
        sendMsg () {
          let _inputtxt = this.$refs.inputbox.innerText;
          _inputtxt = xss.msgClearXss(_inputtxt);//防止xss攻击
            if(this.chatType == 'visitor'){//与访客对话
                this.$Message.info('给访客发送消息啦');
            } else {//与客服对话
                this.$Message.info('给内部发送消息啦');
                // this.$socket.emit('userMsg',{
                //         "c_id": "60000",
                //         "c_t": "0",
                //         "s_id": "4",
                //         "is_en": "0",
                //         "w_k": "e12906e0-831e-11e8-a050-e342921b4d56",
                //         "bd":{
                //             "ext": "qweasd",
                //             "tk": "753951466321",
                //             "s_c_s_id": "112233445566",
                //             "s_co_id": "12345678",
                //             "r_c_s_id": "74185933",
                //             "r_co_id": "12345678",
                //                 "s_t" : "今天晚上一起看球，怎么样？",
                //             "s_ti": "2018/6/21 11:34:56:879"
                //         }
                //     }, res=> {

                // });
            }
        },
        changeSendModel () {

        },
        pasteHtmlAtCaret (html) {//粘贴处理
            if (this.rangeInfo.self === null) {
                this.$refs.inputbox.focus();
                this.editAreaKeyUp();
            }
            let el = document.createElement("div");
            el.innerHTML = html;
            let frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
              lastNode = frag.appendChild(node);
            }
            this.rangeInfo.range.deleteContents();  //删除选中内容
            this.rangeInfo.range.insertNode(frag);  //插入内容
            // Preserve the selection
            if (lastNode) {
                this.rangeInfo.range = this.rangeInfo.range.cloneRange();
                this.rangeInfo.range.setStartAfter(lastNode);
                this.rangeInfo.range.collapse(true);
                this.rangeInfo.selection.removeAllRanges();
                this.rangeInfo.selection.addRange(this.rangeInfo.range);
            }
            
        },
        getObjectURL(file) {//获取图片base64
            let url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        selectItem (type) {
            switch(type) {
                case 's1': {//按ctrl+enter发送
                    this.sendModel = '131';
                    break;
                }
                case 's2': {//按enter发送
                    this.sendModel = '13';
                    break;
                }
                case 's3': {//切换会话是否开启
                    this.isAutoNextDialog = !this.isAutoNextDialog;
                    break;
                }
                case 's4': {//唤起快捷键
                    this.showShortcuts();
                    break;
                }
                default: {
                    break;
                }
            }
        },
        showShortcuts () {//快捷键列表
            
        },
        handleUpload (file) {//上传文件
            this.file = file;
            return false;
        },
        upload () {
            this.loadingStatus = true;
            setTimeout(() => {
                this.file = null;
                this.loadingStatus = false;
                this.$Message.success('Success')
            }, 1500);
        },
        pushActions (type, ev) {//推送表格
            console.log('type', type);
            console.log('ev', ev);
        },
        saveVisitorInfo () {//立即评估

        }
    },
    computed: {
    },
    mounted() {

    },
    watch: {

    }
  }
</script>

<style scoped lang="scss">

.m-inputBox {
    height: 100%;
}
.chat-tools {
    height: 30px;
    border-top: solid 1px $c_12;
    border-bottom: solid 1px $c_12;
    background: $c_1;
    z-index: 1;
    position: relative;

    .pre {
        position: absolute;
        bottom: 26px;
        background: $c_14;
        width: 100%;
        text-indent: 5px;
    }

    .tools-btn {
        width: 24px;
        height: 30px;
        line-height: 30px;
        display: block;
        text-align: center;
        border:solid 1px transparent;
        float: left;

        &:hover {
            background-color: $c_8; 
            border-color: $c_9;
            border-radius: 4px;
        }
    }
    .receiver {
        height: 30px;
        line-height: 30px;

        .to {
            width: 100px;
        }
        .say {
            width: 50px;
        }
    }
    
}
.layout-2 {
    width: 100%;
    overflow-y: auto;
    font-size: 14px;
    padding-bottom: 18px; 
    background-color: $c_14;

    pre {
        -webkit-user-modify: read-write-plaintext-only;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        white-space: pre-wrap;
        word-break: normal;
        outline: none;
        height: 100%;
        cursor: text;
        background-color: $c_1; 
        color: $c_3;
        &:active {
            outline: none;
            border: none;
        }
        &:empty:before {
            content: attr(placeholder);
            display: block;
            color: #ccc;
        }
    }

    .send {
        width: 110px;
        font-size: 0;

        .send-btn ,.send-setting{
            width: 63px;
            height: 27px;
            padding: 0;
            border-radius: 4px 0 0 4px;
            border-color: $c_16; 
            &:disabled{
                border-color: $c_15;
                &:hover {
                    border-color: $c_15;
                }
            }
        }

        .send-setting {
            width: 16px;
            border-radius: 0 4px 4px 0;
            border-left: none;
        }

        .list {
            .item {
                position: relative;
                padding: 0;
                padding-left: 29px;
                padding-right: 24px;
                height: 24px;
                line-height: 24px;
                color: $c_3;
                cursor: pointer;

                .left-point {
                    position: absolute;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    background-color: $c_21;
                    text-align: center;

                    .point {
                        width: 8px;
                        height: 8px;
                        display: block;
                        border-radius: 50%;
                        background-color: $c_3;
                        margin: 0 auto;
                        margin-top: 8px;
                    }
                }

                &:hover {
                    background-color: $c_20; 
                    color: $c_1;
                    
                    .left-point {
                        background-color: $c_20;
                    }
                }
                
            }
        }

        
    }
}

</style>
